<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <title>三列滑动 - JRoll</title>
    <link rel="stylesheet" href="../css/demo.css">
    <script src="../download/jroll.min.js"></script>
</head>

<body>
    <div id="threetabs">
        <header id="header">
            <div id="switchL">切到左边</div>
            <div id="switchC">切到中边</div>
            <div id="switchR">切到右边</div>
            <div id="line"></div>
        </header>
        <div id="wrapper">
            <div id="scrollerL">
            </div>
            <div id="scrollerC">
                <form>
                    <P>text
                        <input type="text">
                    </P>
                    <P>tel
                        <input type="tel">
                    </P>
                    <P>date
                        <input type="date">
                    </P>
                    <P>datetime
                        <input type="datetime">
                    </P>
                    <P>number
                        <input type="number">
                    </P>
                    <P>email
                        <input type="email">
                    </P>
                    <P>
                        <input type="file">
                    </P>
                    <P>file
                        <input type="image">
                    </P>
                    <P>month
                        <input type="month">
                    </P>
                    <P>password
                        <input type="password">
                    </P>
                    <P>radio
                        <input type="radio">
                    </P>
                    <P>
                        <input type="range">
                    </P>
                    <P>range
                        <input type="time">
                    </P>
                    <P>url
                        <input type="url">
                    </P>
                    <P>week
                        <input type="week">
                    </P>
                </form>
            </div>
            <div id="scrollerR">
                <img src="../images/1.jpg" width="100%" height="auto" />
                <p>纳米核心 图1</p>
                <img src="../images/2.jpg" width="100%" height="auto" />
                <p>纳米核心 图2</p>
                <img src="../images/3.jpg" width="100%" height="auto" />
                <p>纳米核心 图3</p>
                <img src="../images/4.jpg" width="100%" height="auto" />
                <p>纳米核心 图4</p>
                <img src="../images/5.jpg" width="100%" height="auto" />
                <p>纳米核心 图5</p>
                <img src="../images/6.jpg" width="100%" height="auto" />
                <p>纳米核心 图6</p>
            </div>
        </div>
    </div>
    <script>
    //给scrollerL填点数据
    (function() {
        var str = "";
        for (var i = 1; i <= 100; i++) {
            str += "<li>" + i + "</li>";
        }
        document.getElementById("scrollerL").innerHTML = str;
    })();

    function gId(id) {
        return document.getElementById(id);
    }

    var sty = document.createElement('div').style;
    var tSF = ("transform" in sty) ? "transform" : "-webkit-transform";
    var tSD = ("transitionDuration" in sty) ? "transition-duration" : "-webkit-transition-duration";

    var switchL = gId("switchL");
    var switchC = gId("switchC");
    var switchR = gId("switchR");
    var line = gId("line");
    var scrollerL = gId("scrollerL");
    var scrollerC = gId("scrollerC");
    var scrollerR = gId("scrollerR");
    var maxScrollX = -2 * scrollerR.offsetWidth;

    var jrollL = new JRoll("#wrapper", {
        bounce: true
    });
    var jrollC = new JRoll("#wrapper", {
        bounce: true,
        scroller: scrollerC
    });
    var jrollR = new JRoll("#wrapper", {
        bounce: true,
        scroller: scrollerR
    });

    jrollL.maxScrollX = jrollC.maxScrollX = jrollR.maxScrollX = maxScrollX;

    function switchTo(x, lineX) {
        line.style[tSD] = "400ms";
        setTimeout(function() {
            line.style[tSF] = "translateX(" + lineX + ")";
            jrollL.scrollTo(x, jrollL.y, 400);
            jrollC.scrollTo(x, jrollC.y, 400);
            jrollR.scrollTo(x, jrollR.y, 400);
            setTimeout(function() {
                line.style[tSD] = "0";
            }, 400)
        }, 4)
    }

    function scrollStart() {
        if (!this._scroll.lockX) {
            this.options.momentum = false;
        } else {
            this.options.momentum = true;
        }
    }

    function scrolling(a, b) {
        if (!this._scroll.lockX) {
            line.style[tSF] = "translateX(" + (-this.x / 3) + "px)";
            a.scrollTo(this.x, a.y);
            b.scrollTo(this.x, b.y);
        }
    }

    /** 事件 **/
    //jrollL
    jrollL.on("scrollStart", scrollStart);
    jrollL.on("scroll", function() {
        scrolling.call(this, jrollR, jrollC);
    });
    jrollL.on("scrollEnd", function() {
        if (this.x < -50) {
            switchTo(maxScrollX / 2, line.offsetWidth + "px");
        } else if (this.x > -50 && this.x < 0) {
            switchTo(0, "0px");
        }
    });
    jrollL.on("refresh", function() {
        this.maxScrollX = maxScrollX = -2 * scrollerR.offsetWidth;
    });
    //jrollC
    jrollC.on("scrollStart", scrollStart);
    jrollC.on("scroll", function() {
        scrolling.call(this, jrollL, jrollR);
    });
    jrollC.on("scrollEnd", function() {
        if (this.x < maxScrollX / 2 - 50) {
            switchTo(maxScrollX, line.offsetWidth * 2 + "px");
        } else if (this.x > maxScrollX / 2 + 50) {
            switchTo(0, "0px");
        } else {
            switchTo(maxScrollX / 2, line.offsetWidth + "px");
        }
    });
    jrollC.on("refresh", function() {
        this.maxScrollX = maxScrollX = -2 * scrollerR.offsetWidth;
    });
    //jrollR
    jrollR.on("scrollStart", scrollStart);
    jrollR.on("scroll", function(e) {
        scrolling.call(this, jrollL, jrollC);
    });
    jrollR.on("scrollEnd", function() {
        if (this.x > maxScrollX + 50) {
            switchTo(maxScrollX / 2, line.offsetWidth + "px");
        } else if (this.x > maxScrollX - 50 && this.x < maxScrollX) {
            switchTo(maxScrollX, line.offsetWidth * 2 + "px");
        }
    });
    jrollR.on("refresh", function() {
        this.maxScrollX = maxScrollX = -2 * scrollerR.offsetWidth;
    });

    switchL.onclick = function() {
        switchTo(0, "0px");
    }
    switchC.onclick = function() {
        switchTo(maxScrollX / 2, line.offsetWidth + "px");
    }
    switchR.onclick = function() {
        switchTo(maxScrollX, line.offsetWidth * 2 + "px");
    }
    </script>
</body>

</html>
